<!DOCTYPE html>
<html>

<head>
  
  <title>Angular部署至Nginx、Tomcat，及性能分析 | 布.</title>
  <meta name="google-site-verification" content="" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta itemprop="name" content="布." />
  <meta itemprop="description" content="漫长岁月" />
  <meta itemprop="image" content="" />
  <link rel="shortcut icon" href="" type="image/x-icon">
  <!-- keywords and description -->
  
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  
  
<link rel="stylesheet" href="/css/style.css">

  <script src="//cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js"></script>
<meta name="generator" content="Hexo 6.0.0"></head>

<body>
  <div id="container">
    <header>
  <div class="site-title">
    <a href="/">
      布.
    </a>
  </div>
  
  <div class="site-subtitle">
    漫长岁月
  </div>
  
  
  <p class="links">
    
    <a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_29485177">
      <img src="/images/links/link.png" alt="CSDN">
    </a>
    
  </p>
  
</header>
    <div id="main">
      <article class="post">
  <h3 class="date">
  <time datetime="2017-08-31T16:00:00.000Z">
    Sep 1, 2017
  </time>
</h3>
  <h1>Angular部署至Nginx、Tomcat，及性能分析</h1>
  <p class="post-info">
  
  
</p>
  
  
  <article>
    <h2 id="Angular部署至Nginx、Tomcat，及性能分析"><a href="#Angular部署至Nginx、Tomcat，及性能分析" class="headerlink" title="Angular部署至Nginx、Tomcat，及性能分析"></a>Angular部署至Nginx、Tomcat，及性能分析</h2><h4 id="打包Angular工程"><a href="#打包Angular工程" class="headerlink" title="打包Angular工程"></a>打包Angular工程</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ng build --prod</span><br></pre></td></tr></table></figure>
<p>工程目录下的dist是构建后的代码</p>
<h4 id="部署至Nginx"><a href="#部署至Nginx" class="headerlink" title="部署至Nginx"></a>部署至Nginx</h4><p>将dist中的代码复制到一个指定目录，例如</p>
<p>linux：&#x2F;usr&#x2F;local&#x2F;ngweb</p>
<p>windows: D:&#x2F;ngweb&#x2F;</p>
<blockquote>
<p>修改nginx&#x2F;conf&#x2F;nginx.conf</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">server&#123;</span><br><span class="line">	listen 80;</span><br><span class="line">	server_name  localhost;</span><br><span class="line">	location / &#123;</span><br><span class="line">	    root   /usr/local/ngweb/;</span><br><span class="line">	    index  index.html;</span><br><span class="line">    	try_files $uri $uri/ /index.html;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>try_files $uri $uri&#x2F; &#x2F;index.html; 若找不到匹配路径则匹配&#x2F;index.html</p>
<p>启动nginx</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">/usr/local/nginx/sbin/nginx</span><br></pre></td></tr></table></figure>
<p>重启nginx</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">/usr/local/nginx/sbin/nginx -s reload</span><br></pre></td></tr></table></figure>

<h4 id="部署至Tomcat"><a href="#部署至Tomcat" class="headerlink" title="部署至Tomcat"></a>部署至Tomcat</h4><p>修改app.routing.module.ts，使用useHash，如果不设置的话，在路由地址发生变化后刷新页面会导致404错误</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">@NgModule(&#123;</span><br><span class="line">    imports: [RouterModule.forRoot(routes, &#123; useHash: true &#125;)],</span><br><span class="line">    exports: [RouterModule]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>将dist中的代码复制到 tomcat&#x2F;webapps&#x2F;ROOT&#x2F; 下,默认端口为8080</p>
<p>若需要将端口修改为80则在 tomcat&#x2F;conf&#x2F;server.xml 中设置</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;Connector port=&quot;80&quot; protocol=&quot;HTTP/1.1&quot; connectionTimeout=&quot;20000&quot; redirectPort=&quot;8443&quot; /&gt;</span><br></pre></td></tr></table></figure>
<p>启动tomcat</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sh /usr/local/tomcat/bin/startup.sh</span><br></pre></td></tr></table></figure>
<p>停止tomcat</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sh /usr/local/tomcat/bin/shutdown.sh</span><br></pre></td></tr></table></figure>

<h4 id="性能对比"><a href="#性能对比" class="headerlink" title="性能对比"></a>性能对比</h4><ul>
<li>环境：1核2G内存Centos7 (VMWare)、<a target="_blank" rel="noopener" href="http://nginx.org/en/download.html">Nginx(1.15.8)</a>、<a target="_blank" rel="noopener" href="https://archive.apache.org/dist/tomcat/tomcat-7/v7.0.65/bin/">Tomcat(7.0.65)</a></li>
<li>工具： <a target="_blank" rel="noopener" href="https://jmeter.apache.org/">Apache-JMeter</a></li>
</ul>
<p><strong>100并发</strong></p>
<blockquote>
<p>Nginx<br><img src="https://img-blog.csdnimg.cn/20190118113902217.png" alt="Nginx100并发"><br>Tomcat<br><img src="https://img-blog.csdnimg.cn/20190118113956821.png" alt="Tomcat100并发"></p>
</blockquote>
<p><strong>200并发</strong></p>
<blockquote>
<p>Nginx<br><img src="https://img-blog.csdnimg.cn/20190118133949834.png" alt="Nginx200并发"><br>Tomcat<br><img src="https://img-blog.csdnimg.cn/20190118134018307.png" alt="Tomcat200并发"></p>
</blockquote>
<p><strong>500并发</strong></p>
<blockquote>
<p>Nginx<br><img src="https://img-blog.csdnimg.cn/20190118134310576.png" alt="Nginx500并发"><br>Tomcat<br><img src="https://img-blog.csdnimg.cn/20190118134335205.png" alt="Tomcat500并发"></p>
</blockquote>
<p>通过对比，Nginx在高并发下性能较Tomcat更好</p>

  </article>
  
</article>


    </div>
  </div>
  <footer>
  
  
  <p>
    Powered by <a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a> | Theme <a target="_blank" rel="noopener" href="https://github.com/syy11cn/hexo-theme-linear">Linear</a> from <a target="_blank" rel="noopener" href="https://syy11.cn">Yiyang Sun</a>
  </p>
</footer>
  
  <script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
  </script>
  <script>
    Waline({
      el: '#waline',
      placeholder: '',
      avatar: 'retro',
      visitor: true,
      requiredFields: ['nick', 'mail'],
      serverURL: '',
      emoji: [
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili',
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/alus',
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tieba',
      ]
    });
  </script>
</body>

</html>